<template>
  <div class="stock-in-apply-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>资产入库申请</span>
        </div>
      </template>

      <!-- 入库申请表单 -->
      <el-form
        ref="stockInFormRef"
        :model="stockInForm"
        :rules="formRules"
        label-width="120px"
        class="stock-in-form"
      >
        <!-- 资产基本信息 -->
        <el-divider content="资产基本信息" />
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="资产名称" prop="assetName">
              <el-input
                v-model="stockInForm.assetName"
                placeholder="请输入资产名称"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="资产编号" prop="assetCode">
              <el-input
                v-model="stockInForm.assetCode"
                placeholder="请输入资产编号（如 ASSET-XXX）"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="资产类型" prop="assetType">
              <el-select
                v-model="stockInForm.assetType"
                placeholder="请选择资产类型"
              >
                <el-option label="办公设备" value="OFFICE_EQUIPMENT" />
                <el-option label="电子设备" value="ELECTRONIC_EQUIPMENT" />
                <el-option label="家具" value="FURNITURE" />
                <el-option label="其他" value="OTHER" />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="规格型号" prop="specification">
              <el-input
                v-model="stockInForm.specification"
                placeholder="请输入规格型号"
                maxlength="100"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单价(元)" prop="price">
              <el-input
                v-model="stockInForm.price"
                type="number"
                placeholder="请输入资产单价"
                min="0"
                step="0.01"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="数量" prop="quantity">
              <el-input
                v-model="stockInForm.quantity"
                type="number"
                placeholder="请输入入库数量"
                min="1"
                step="1"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 入库信息 -->
        <el-divider content="入库信息" />
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入库仓库" prop="warehouseId">
              <el-select
                v-model="stockInForm.warehouseId"
                placeholder="请选择入库仓库"
              >
                <el-option label="总仓库" value="1" />
                <el-option label="一分部仓库" value="2" />
                <el-option label="二分部仓库" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="预计入库日期" prop="expectStockInDate">
              <el-date-picker
                v-model="stockInForm.expectStockInDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="入库原因" prop="reason">
          <el-input
            v-model="stockInForm.reason"
            type="textarea"
            placeholder="请说明入库原因（如采购入库、归还入库等）"
            rows="4"
            maxlength="500"
          />
        </el-form-item>

        <!-- 申请人信息 -->
        <el-divider content="申请人信息" />
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请人姓名" prop="applicantName">
              <el-input
                v-model="stockInForm.applicantName"
                placeholder="请输入申请人姓名"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="所属部门" prop="deptId">
              <el-select
                v-model="stockInForm.deptId"
                placeholder="请选择所属部门"
              >
                <el-option label="技术部" value="1" />
                <el-option label="市场部" value="2" />
                <el-option label="行政部" value="3" />
                <el-option label="财务部" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 表单操作按钮 -->
        <el-form-item class="form-actions">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">提交申请</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
// 引入入库申请接口（假设已封装）
import { submitStockInApply } from '@/api/assetStockIn'

// 表单引用
const stockInFormRef = ref(null)

// 表单数据
const stockInForm = reactive({
  // 资产基本信息
  assetName: '',        // 资产名称
  assetCode: '',        // 资产编号
  assetType: '',        // 资产类型
  specification: '',    // 规格型号
  price: null,          // 单价
  quantity: 1,          // 数量（默认1）
  
  // 入库信息
  warehouseId: '',      // 入库仓库ID
  expectStockInDate: '', // 预计入库日期
  reason: '',           // 入库原因
  
  // 申请人信息
  applicantName: '',    // 申请人姓名
  deptId: ''            // 部门ID
})

// 表单校验规则
const formRules = {
  assetName: [
    { required: true, message: '请输入资产名称', trigger: 'blur' },
    { max: 50, message: '名称不能超过50个字符', trigger: 'blur' }
  ],
  assetCode: [
    { required: true, message: '请输入资产编号', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9\-]+$/, message: '编号仅支持字母、数字和横线', trigger: 'blur' }
  ],
  assetType: [
    { required: true, message: '请选择资产类型', trigger: 'change' }
  ],
  price: [
    { required: true, message: '请输入资产单价', trigger: 'blur' },
    { type: 'number', min: 0, message: '单价不能为负数', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入入库数量', trigger: 'blur' },
    { type: 'number', min: 1, message: '数量至少为1', trigger: 'blur' }
  ],
  warehouseId: [
    { required: true, message: '请选择入库仓库', trigger: 'change' }
  ],
  expectStockInDate: [
    { required: true, message: '请选择预计入库日期', trigger: 'change' }
  ],
  reason: [
    { required: true, message: '请说明入库原因', trigger: 'blur' },
    { max: 500, message: '原因不能超过500个字符', trigger: 'blur' }
  ],
  applicantName: [
    { required: true, message: '请输入申请人姓名', trigger: 'blur' }
  ],
  deptId: [
    { required: true, message: '请选择所属部门', trigger: 'change' }
  ]
}

// 重置表单
const resetForm = () => {
  if (stockInFormRef.value) {
    stockInFormRef.value.resetFields()
  }
}

// 提交表单
const submitForm = async () => {
  if (!stockInFormRef.value) return
  
  // 表单校验
  const valid = await stockInFormRef.value.validate()
  if (!valid) return
  
  try {
    // 调用接口提交入库申请
    await submitStockInApply(stockInForm)
    ElMessage.success('入库申请提交成功，等待审批')
    resetForm() // 提交成功后重置表单
  } catch (error) {
    ElMessage.error(error.message || '提交失败，请重试')
  }
}
</script>

<style scoped>
.stock-in-apply-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.stock-in-form {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.el-divider {
  margin: 15px 0;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
</style>